<!DOCTYPE html>
<html>

<head>
	<% include ../../web/jingpeng/meta.html %>
		<% include global/top-css.html %>
			<title></title>
</head>

<body>

	<% include ../../web/jingpeng/header.html %>
		<section class="row">
			<img class="wauto" src="/static/web/jingpeng/img/news.jpg" alt="">
		</section>

		<section class="row pc-page content mt-10">
			<div class="m-form login center">
					<h2 class="c-277bc1 f-32 text-c">密码重置</h2>
					<p class="f-14 c-616161 text-c mb-20">京鹏山泉乃凤凰岭神泉脚下天然泉眼，健康饮水从此刻开始</p>
				<form action="/user/repass" name="reg" @submit.prevent="checkReg" method="post">
					<ul class="mt-30">
                            <li class="row f-14 c-666 mb-10">
                                    <div class="col-hd">
                                        <label class="label text-r mr-10 mt-5" for="#">手机号码</label>
                                    </div>
                                    <div class="col-bd">
                                        <input type="tel" name="tel" v-model="params.tel" placeholder="请正确填写手机号码" class="input"/>
                                    </div>
                                </li>
        
                                <li class="row f-14 c-666 mb-10">
                                    <div class="col-hd">
                                        <label class="label text-r mr-10 mt-5">
                                            短信验证码
                                        </label>
                                    </div>
                                    <div class="col-bd">
                                        <input type="number" class="input w-200" v-model="params.smscode" name="smscode" placeholder="请输入短信验证码">
                                    </div>
                                    <div class="col-ft pt-8 btn-yzmx" @click="getSmsCode($event)">获取验证码</div>
                                </li>

						<li class="row f-14 c-666 mb-10">
							<div class="col-hd">
								<label class="label text-r mr-10 mt-5" for="#">密码</label>
							</div>
							<div class="col-bd">
								<input type="password" name="pass" v-model="params.pass" placeholder="密码不能小于6位" class="input" value="" />
							</div>
						</li>
						<li class="row f-14 c-666 mb-10">
							<div class="col-hd">
								<label class="label text-r mr-10 mt-5" for="#">密码确认</label>
							</div>
							<div class="col-bd">
								<input type="password" name="repass" id="" placeholder="密码确认和密码保持一致" class="input" value="" />
							</div>
						</li>

						

						<li>
							<div class="col-hd">
								<label class="label text-r mr-10 mt-5">
								</label>
							</div>
							<div class="col-bd pd-10 c-666 f-14">
							<input type="checkbox" v-model="checked" class="checkbox pos-r t-1 mr-5">我同意并遵守<a href="c-2d6ed7">《京鹏寻泉服务协议》</a>
						</div>
						</li>
						<li >
							<input name="send" class="btn-block mt-30 btn-login btn-primary" type="submit" value="确定" />
						</li>

					</ul>
				</form>
			</div>
		</section>
		<% include global/footer.html %>
			<% include global/footer-js.html %>
				<script>
					var vm = new Vue({
						el: '.login',
						data: {
							yzm: 0000,
							tel: '',
							sending: false, //判断是否正在发送中
							checked:true,
							params: {
								pass: '',
								tel: '',
								smscode: ''
							}
						},
						methods: {

							smsCodeTime: function (el, time) {
								var _this = this;
								var _time = time;
								_this.sending = true;
								var timer = setInterval(function () {
									if (_time <= 0) {

										el.innerText = '获取验证码';
										clearInterval(timer);
										_this.sending = false;
										return false;
									}
									_time--
									el.innerText = '剩余' + _time + 's';
								}, 1000);
							},
							getSmsCode: function (event) {
								var fm = document.reg;
								var _this = this;

								if (_this.sending) {
									return;
								}
								if (!$m.isTel(fm.tel.value)) {
									$m.showToast('请正确输入手机号!');
									$m.hideTost();
									return;
								}
								_this.smsCodeTime(event.srcElement, 60);

								//给旧的手机号发送验证码
								$.ajax({
									url: "/api/sms-code",
									data: { "tel": _this.params.tel },
									cache: false,
									type: "get",
									dataType: 'json',
									success: function (data) {
										if (data.Code == 'OK') {
											_this.$message('验证码发送成功，请注意查收！');
										} else {
											_this.$message(data.Message);
										}
									}
								});
							},

							checkReg: function () {
								var _this = this;
								var fm = document.reg;

								if (fm.tel.value == '') {
									_this.$message('手机号码不能为空！');
									fm.tel.focus();
									return false;
								}

								if (fm.pass.value == '' || fm.pass.value.length < 6) {
									_this.$message('密码不得为空且不能小于六位！');
									fm.pass.focus();
									return false;
								}


								if (fm.pass.value !== fm.repass.value) {
									_this.$message('确认密码和密码不一致！');
									fm.repass.focus();
									return false;
								}


								if (fm.smscode.value == '' || fm.smscode.value.length != 4) {
									_this.$message('请正确填写手机验证码');
									fm.smscode.focus();
									return false;
								}

								//fm.submit();

								$.ajax({
									url: "/user/repass",
									data: _this.params,
									cache: false,
									type: "post",
									dataType: 'json',
									success: function (data) {
										if (data.success) {
											_this.$message('密码修改成功，2s后自动跳转到登录界面');
											setTimeout(function () {
												location.href = "/user/login"
											}, 2000)
										} else {
											_this.$message(data.msg)
										}
									}
								});

							}

						},
						created: function () {
							//fm.submit();
						},
						mounted: function () {

						},
						updated: function () {

						}
					});

				</script>
</body>

</html>